<template>
  <el-card>
    <!-- 搜索框 -->
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input placeholder="请输入用户账号/密码" clearable v-model="queryForm.query"></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initGetUserlist">搜索</el-button>
      <el-button type="primary" @click="dialogVisible = true">添加管理员</el-button>
    </el-row>
    <!-- 表单 -->
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column prop="username" label="账户"  />
      <el-table-column prop="password" label="密码" />
      <el-table-column label="操作" fixed="right" width="150">
        <template #default="scope">
          <el-button type="primary" size="small" @click="opendialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteUser(scope.row.username)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :page-size="queryForm.pagesize"
      :pager-count="5"
      layout="prev, pager, next"
      :total="queryForm.totle"
      :hide-on-single-page="queryForm.pagesize>=queryForm.totle"
      @current-change="handleCurrentChange"
      :current-page="queryForm.pagename"
    />
  </el-card>
  <!-- 用户信息对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="编辑管理员信息"
    width="50%"
    :show-close="false"
    @close="closedialo"
  >
      <el-form :model="userinfo" label-width="120px" :rules="rules" ref="formRef">
        <el-form-item label="账号" prop="username">
          <el-input v-model="userinfo.username" :disabled="isfix"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userinfo.password" />
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="summit">提交</el-button>
        </el-form-item>
      </el-form>
  </el-dialog>
</template>

<script setup>
  import { Search } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  import { getadminlist, setadmininfo, deladmininfo } from '@/api/admin'
  import { ElMessage, ElMessageBox } from 'element-plus'

  const queryForm = ref({
    query: '',
    pagename: 1,
    pagesize: 4,
    totle: 0
  })
  const tableData = ref([])
  const adminlist = ref([])

  // 查询用户列表
  const initGetUserlist = async () => {
    // console.log(queryForm.value.query)
    const res = await getadminlist({
      query: queryForm.value.query
    })
    adminlist.value = res.adminlist
    queryForm.value.totle = res.adminlist.length
    handleCurrentChange(1)
  }
  // 分页展示表格
  const initTableData = () => {
    const start = (queryForm.value.pagename - 1) * queryForm.value.pagesize
    let end = queryForm.value.pagename * queryForm.value.pagesize
    end = end < queryForm.value.totle ? end : queryForm.value.totle
    const arr = []
    for (let i = start; i < end; i++) {
      arr.push(adminlist.value[i])
    }
    tableData.value = arr
  }
  initGetUserlist()
  // 改变分页
  const handleCurrentChange = (number) => {
    queryForm.value.pagename = number
    initTableData()
  }

  // 编辑/新增用户表单弹窗
  const dialogVisible = ref(false)
  const userinfo = ref({
    username: '',
    password: '',
    isAdd: true
  })
  const isfix = ref(false)
  const rules = ref({
    username: [
      { required: true, message: '输入内容不能为空', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '输入内容不能为空', trigger: 'blur' }
    ]
  })
  const opendialog = (item) => {
    dialogVisible.value = true
    userinfo.value = JSON.parse(JSON.stringify(item))
    userinfo.value.isAdd = false
    isfix.value = true
  }
  // 关闭/取消弹窗
  const closedialo = () => {
    userinfo.value = {
      username: '',
      password: '',
      isAdd: true
    }
    isfix.value = false
    dialogVisible.value = false
  }
  // 提交
  const formRef = ref(null)
  const summit = () => {
    formRef.value.validate(async (valid) => {
      if (valid) {
        setadmininfo(userinfo.value).then(res => {
          closedialo()
          ElMessage.success(res.msg)
          initGetUserlist()
        })
      } else {
        return false
      }
    })
  }
  // 删除用户
  const deleteUser = (username) => {
    ElMessageBox.confirm(
      '是否删除该管理员',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    .then(() => {
      deladmininfo({
        username
      }).then(res => {
        ElMessage.success(res.msg)
        initGetUserlist()
      })
    })
  }
</script>

<style lang="scss" scoped>
  .header {
    padding-bottom: 16px;
    box-sizing: border-box;
  }
  ::v-deep .el-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  ::v-deep .el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
</style>
